<template>
    <div class="app-container">
      <el-descriptions >
        <span slot="title" style="padding-right: 20px;"><i class="el-icon-back" @click="back()"></i>{{ details.name }}
        </span>
        <el-descriptions-item label="产品">{{details.product.name}}</el-descriptions-item>
        <el-descriptions-item label="设备类型">{{details.deviceType.name}}</el-descriptions-item>
        <el-descriptions-item label="deviceKey">{{ details.deviceKey }}</el-descriptions-item>
        <el-descriptions-item label="deviceSecret">{{ details.newDeviceSecret }}</el-descriptions-item>
        <el-descriptions-item label="在线状态">
            <el-switch
              style="display: block"
              v-model="details.active"
              active-value="2"
              inactive-value="1"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="在线"
              inactive-text="离线"
              @change="switchChange(details.active)">
          </el-switch>
        </el-descriptions-item>
     </el-descriptions>
     <div>
            <el-tabs type="border-card">
                <el-tab-pane label="设备信息">
                    <el-descriptions title="设备信息">
                        <el-descriptions-item label="产品名称">{{ details.product.name }}</el-descriptions-item>
                        <el-descriptions-item label="productKey">{{ details.product.productKey }}</el-descriptions-item>
                        <el-descriptions-item label="deviceName">{{ details.name }}</el-descriptions-item>
                        <el-descriptions-item label="地域">{{  details.area.name }}</el-descriptions-item>
                        <el-descriptions-item label="创建时间">{{ details.createTime }}</el-descriptions-item>
                    </el-descriptions>
                </el-tab-pane>
                <el-tab-pane label="Topic列表">
                    <el-table :data="topics" style="width: 100%"
                        :header-cell-style="{ background: '#F7F7F8', color: '#18191B', 'text-align': 'center' }">
                        <el-table-column prop="topic" label="设备的Topic"  align="center">
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-link @click="details(scope.row.id)" type="info" :underline="false"
                                    disabled>详情</el-link>&nbsp;&nbsp;&nbsp;&nbsp;
                                <el-link @click="deleteData(scope.row.id)" type="info" disabled :underline="false">删除</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="物模型数据">暂无数据</el-tab-pane>
                <el-tab-pane label="上报数据">暂无数据</el-tab-pane>
                <el-tab-pane label="发送数据">暂无数据</el-tab-pane>
            </el-tabs>
        </div>

    </div>
</template>
    
  <script>

    

    import { getDetail, getTopic } from "@/api/device/device";
    import { decode } from "js-base64";
    export default {
      methods: {
        back(){
          this.$router.go(-1);
        },
        getDeviceDetail(did){
            console.log(did);
            getDetail(did).then((res)=>{
                this.details=res.data;
                this.deviceKey=this.details.deviceKey;
                this.getDeviceTopic(this.deviceKey);
              
            })
        },
        getDeviceTopic(deviceKey){
          console.log(deviceKey);
          getTopic(deviceKey).then((res)=>{
              if(res.code==0){
                this.topics=res.data;
                console.log(res.data);
              }
          })
        },
        switchChange(acitive){
          
        },
        
      },
      created() {
        var token = localStorage.getItem("token");
        var payload = token.substring(
          token.indexOf(".") + 1,
          token.lastIndexOf(".")
        );
        var user = JSON.parse(JSON.parse(decode(payload)).user);
        var did =localStorage.getItem("did");
        this.getDeviceDetail(did);
      },
      data() {
        return{
            details:{},
            dialogFormVisible1: false,
            topics:[],
            deviceKey:""
        }
      },
      mounted() {
  
      },
    
    };
    </script>